<template>
	<view class="awards-declare">
		<bs-navbar title='奖项申报'></bs-navbar>
		<u-tabs active-color='#0050A5' inactive-color='#9A9A9A' :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		<bs-gap top="0" bottom="0"></bs-gap>
		<view class="thead">
			<view class="th">
				奖项说明
			</view>
			<view class="th">
				申报时间
			</view>
			<view class="th">
				申报状态
			</view>
		</view>
		<view v-if="awardsList.length!=0">
			<view class="tbody" v-for="item in awardsList">
				<view class="td">
					{{item.title}}
				</view>
				<view class="td">
					{{item.applyDate}}
				</view>
				<view class="td">
					{{statusList[item.status]}}
				</view>
			</view>
			<view class="mb-30 mt-30">
				<u-loadmore :status="status" />
			</view>
		</view>
		<u-empty margin-top='20' font-size='24' icon-size='80' v-else :text="'暂无奖项申报'"></u-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusList: ['待审核', '审核完成', '审核失败'],
				list: [{
					name: '全部',
					id: ''
				}, {
					name: '审核完成',
					id: '1'
				}, {
					name: '待审核',
					id: '0'
				}, {
					name: '审核失败',
					id: '2'
				}],
				current: 0,
				pages: 0,
				status: 'nomore',
				paging: {
					status: '',
					page: 1,
					pageSize: 10,
					declareType: 0,
				},
				awardsList: []
			};
		},
		async onReachBottom() {
			await this.getMore()
		},
		onLoad() {
			this.init()
		},
		methods: {
			async getMore() {
				if (this.pages == this.paging.page) {
					this.status = 'nomore';
					return
				}
				this.status = 'loading';
				this.paging.page = ++this.paging.page;
				let awardsList = await this.$u.api.selectMyAward(this.paging)
				this.pages = awardsList.pages
				this.awardsList = this.awardsList.concat(awardsList.list)
				this.status = 'loadmore';
			},
			async init() {
				let res = await this.$u.api.selectMyAward(this.paging)
				this.pages = res.pages
				this.awardsList = res.list
			},
			change(index) {
				this.current = index;
				this.paging.status = this.list[index].id
				this.init()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.awards-declare {
		.thead {
			padding: 24rpx 0;
			@include my-flex($jc: $bs-sb, $ai:center);

			.th {
				color: #303030;
				font-size: 30rpx;
				width: 33.33%;
				text-align: center;
			}
		}

		.tbody {
			@include my-flex($jc: $bs-sb, $ai:center);
			padding: 20rpx 0;

			.td {
				color: #666666;
				font-size: 26rpx;
				width: 33.33%;
				text-align: center;
			}
		}

		.tbody:nth-child(even) {

			background-color: #fff;
		}

		.tbody:nth-child(odd) {
			background-color: #f7f7f7;
		}
	}
</style>
